import ArticleItem from '../ArticleItem'
import { getArticleList, getNewArticleList } from '@/store/actions/home'
import styles from './index.module.scss'
import { useDispatch, useSelector } from 'react-redux'
import { useEffect } from 'react'
import { RootState } from '@/types/store'
import { Article } from '@/types/data'
import { InfiniteScroll, PullToRefresh } from 'antd-mobile'
type Props = {
  channel_id: number
}
const ArticleList = ({ channel_id }: Props) => {
  const dispatch = useDispatch()
  // useEffect(() => {
  //   dispatch(getArticleList(channel_id, Date.now()))
  // }, [dispatch, channel_id])
  const { articles } = useSelector((state: RootState) => state.channel)
  const { results = [], pre_timestamp } = articles[channel_id] || {}
  const hasMore = results.length >= 100
  const loadMode = async () => {
    await dispatch(getArticleList(channel_id, +pre_timestamp || Date.now()))
  }

  const onRefresh = async () => {
    await dispatch(getNewArticleList(channel_id, Date.now()))
  }
  return (
    <div className={styles.root}>
      <PullToRefresh onRefresh={onRefresh}>
        {results.map((item: Article) => {
          return (
            <div className="article-item">
              <div key={item.art_id}>
                <ArticleItem article={item} />
              </div>
            </div>
          )
        })}
      </PullToRefresh>
      <InfiniteScroll loadMore={loadMode} hasMore={hasMore}></InfiniteScroll>
    </div>
  )
}

export default ArticleList
